<script setup lang="ts">
import { withdrawAPI } from '@/apis/withdraw'
import { useUserInfoStore } from '@/store/userInfo'

const router = useRouter()
const userInfoStore = useUserInfoStore()

const allMoney = ref('')
const money = ref('')

onLoad((options) => {
  if (!options?.money)
    return
  allMoney.value = options.money
})

function fillAllMoney() {
  money.value = allMoney.value
}

const handleSubmit = useThrottleFn(async () => {
  const res = await withdrawAPI({
    money: money.value,
  }, userInfoStore.userInfo!.token)
  if (res.data?.code !== 1) {
    uni.showToast({ title: res.data?.msg, icon: 'none' })
    return
  }
  uni.showModal({
    title: '提现成功',
    showCancel: false,
    success: () => router.back(),
  })
}, 1000)
</script>

<template>
  <view class="absolute left-0 top-0 h-400rpx w-screen bg-#3F8BF6" />
  <view class="relative z-10 px-24rpx">
    <view class="px-40rpx">
      <Spacer h="72" />
      <view class="text-32rpx text-white leading-45rpx">
        我的余额
      </view>
      <Spacer h="4" />
      <view class="text-72rpx text-white leading-100rpx">
        ¥{{ allMoney || '--' }}
      </view>
      <Spacer h="52" />
    </view>
    <view class="rounded-10rpx bg-white p-40rpx">
      <view class="font-meidum text-28rpx text-#333333 leading-40rpx">
        提现金额
      </view>
      <Spacer h="40" />
      <view class="flex items-center justify-between">
        <view class="flex flex-auto items-baseline">
          <view class="text-72rpx text-#333333 font-medium leading-100rpx">
            ¥
          </view>
          <input v-model="money" type="text" placeholder="请输入" class="text-72rpx text-#333333 font-medium leading-100rpx" placeholder-class="text-#ededed">
        </view>
        <view
          class="ml-40rpx flex-none text-32rpx text-#3F8BF6 font-medium leading-45rpx"
          @tap="fillAllMoney"
        >
          全部提现
        </view>
      </view>
      <Spacer h="40" />
      <Divider w="623" />
      <Spacer h="40" />
      <view class="flex items-center justify-between">
        <view class="text">
          提现至
        </view>
        <view class="flex items-center">
          <image
            class="h-40rpx w-50rpx"
            src="@/static/images/wechat.png"
          />
          <Spacer w="12" />
          <view class="text-28rpx text-#333333 font-medium leading-40rpx">
            微信
          </view>
        </view>
      </view>
    </view>
    <Spacer h="40" />
    <view class="text-24rpx text-#707070 leading-32rpx">
      1、一个月可提现两次，提现时间为每个月1
    </view>
  </view>
  <view class="fixed bottom-40rpx x-center">
    <RGButton @tap="handleSubmit">
      立即提现
    </RGButton>
  </view>
</template>

<route lang="yaml">
name: 'withdrawal'
style:
  navigationBarTitleText: '立即提现'
</route>
